<template>
	<view class="page">
		<view class="goods-head">
			<!-- 返回 -->
			<view class="back" @click="onBack">
				<view class="back-one action">
					<text></text>
				</view>
			</view>
			<!-- 股票名称 -->
			<view class="head-tab">
				<view class="tab">
					<text class="tab-name name">{{marketData.name}}</text>
					<text class="tab-name code">{{marketData.code}}</text>
				</view>
			</view>
			<!-- 刷新 -->
			<view class="back" @click="getacInfo(accounId)">
				<view class="cuIcon cuIcon-refresh icon_16">
					<text></text>
				</view>
			</view>
		</view>
		<!-- 买卖档 -->
		<view class="goods-discounts">
			<view class="list">
				<view class="title br-red"   :class="{'action':Btype==1}" @click="Btype=1"><text>买入</text></view>
				<view class="title br-green" :class="{'action':Btype==2}" @click="Btype=2"><text>卖出</text></view>
			</view>
			<view class="flex">
				<view class="flex-sub margin-xs radius">
					<view class="flex justify-between grid col-4" v-for="(item,index) in 5" :key="index">
						<view class="margin-xs text-sm text-left">
							<text>买{{index+1}}</text>
						</view>
						<view class="margin-xs text-sm text-center" 
						:class="{'red':marketData[funbs('buy',index+1,'price')]>=Y}">
							<text>{{marketData[funbs('buy',index+1,'price')]}}</text>
						</view>
						<view class="margin-xs text-sm text-right">
							<text>{{marketData[funbs('buy',index+1,'amount')]}}</text>
						</view>
					</view>
				</view>
				<view class="flex-sub margin-xs radius">
					<view class="flex justify-between grid col-4" v-for="(item,index) in 5" :key="index">
						<view class="margin-xs text-sm text-left">
							<text>卖{{index+1}}</text>
						</view>
						<view class="margin-xs text-sm text-center" 
						:class="{'red':marketData[funbs('sell',index+1,'price')]>=Y}">
							<text>{{marketData[funbs('sell',index+1,'price')]}}</text>
						</view>
						<view class="margin-xs text-sm text-right">
							<text>{{marketData[funbs('sell',index+1,'amount')]}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 价格相关 -->
		<view class="banner-title">
			<view class="price-info flex grid col-4">
				<view class="flex-twice text-left">
					<view class="flex-sub text-sm">
						<text class="left">最新：</text>
						<text class="right red" v-if="marketData.price_range>0">{{marketData.current_price||'0.00'}}</text>
						<text class="right green" v-else>{{marketData.current_price||'0.00'}}</text>
						<text class="left" style="margin-left:10px"></text>
						<text class="right red" v-if="marketData.price_range>0">{{marketData.price_rate}}%</text>
						<text class="right green" v-else>{{marketData.price_rate||'0.00'}}%</text>
					</view>
				</view>
				<view class="flex-sub text-center">
					<view class="flex-sub text-sm">
						<text class="left">涨停：</text>
						<text class="right red">{{marketData.harden_price||'0.00'}}</text>
					</view>
				</view>
				<view class="flex-sub text-right">
					<view class="flex-sub text-sm">
						<text class="left">跌停：</text>
						<text class="right green">{{marketData.drop_price||'0.00'}}</text>
					</view>
				</view>
			</view>
			<view class="attr-size flex">
				<view class="attr-list flex-twice">
					<view class="cu-btn flex-sub" v-for="(item,index) in PriceList"
					:class="{'action':PriceIndex === index}"
					@click.stop="onPriceList(index)" :key="index">
						<text class="text-sm">{{item.name}}</text>
					</view>
				</view>
				<view class="attr-list cu-btn round flex-twice">
					<view class="btn" @click="subwin = true">
						<text class="text">{{sub_account||'选择操盘账户'}}</text>
					</view>
				</view>
			</view>
			<view class="attr-price">
				<view class="left" >委托金额：<text class="t_16">{{amount}}</text></view>
				<view class="right">账户余额：<text class="t_16">{{accountInfo.avail}}</text></view>
			</view>
			<view class="attr-maine">
				<view class="attr-number">
					<view class="tit">价格：</view>
					<view class="number text-center">
						<text class="kuang iconfont icon-jian" @click="onReduction('price')"></text>
						<input type="number" v-model="price" maxlength="8" class="great" 
						:placeholder="PriceIndex==1?'按市价即时成交':'请填写价格'" 
						@input.stop ="PriceIndex==1?onInputPrice():''">
						<text class="kuang iconfont icon-jia" @click="onIncrease('price')"></text>
					</view>
				</view>
				<view class="attr-number text-center" v-if="Btype === 1">
					<view class="tit">数量：</view>
					<view class="number">
						<text class="kuang iconfont icon-jian" @click="onReduction('count')"></text>
						<input type="number" v-model="count" value="1" maxlength="8" class="red" 
						:placeholder="Canbuy?'可买'+Canbuy+'股':'无可买数量'" @input.stop="onInputCount">
						<text class="kuang iconfont icon-jia" @click="onIncrease('count')"></text>
					</view>
				</view>
				<view class="attr-number text-center" v-if="Btype === 2">
					<view class="tit">数量：</view>
					<view class="number">
						<text class="kuang iconfont icon-jian" @click="onReduction('count')"></text>
						<input type="number" v-model="count" value="1" maxlength="8" class="red" 
						:placeholder="Cansell?'可卖'+Cansell+'股':'无持仓'" @input.stop="onInputCount">
						<text class="kuang iconfont icon-jia" @click="onIncrease('count')"></text>
					</view>
				</view>
			</view>
			<view class="attr-size">
				<view class="attr-list">
					<view class="size-list">
						<view class="list" v-for="(item,index) in AttrList" 
						:class="{'action':AttrIndex === index}"
						@click.stop="onAttrList(index)" :key="index">
							<text>{{item.size}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="attr-btn">
				<view class="add-buy"  v-if="Btype === 1" @click="onConfirm(Btype)">确认买入</view>
				<view class="add-sell" v-if="Btype === 2" @click="onConfirm(Btype)">确认卖出</view>
			</view>
		</view>
		<!-- 持仓 -->
		<view class="position" @click="getPosition(accounId)">
			<view class="title">
				<text>名称/代码</text>
				<text>可用/持仓</text>
				<text>现价/成本</text>
				<text>盈亏/市值</text>
			</view>
			<view class="info-ul text-center">
				<view class="none text-grey" v-if="Position==''">点击加载持仓数据</view>
				<view class="list" v-else v-for="(item,index) in Position" :key="index" 
				@click="onTrad(item.gupiao_code,item.canbuy_count,item.sell_one_price,item.buy_one_price)">
					<view class="info">
						<text class="big">{{item.gupiao_name}}</text>
						<text>{{item.gupiao_code}}</text></view>
					<view class="info">
						<text class="big">{{item.canbuy_count}}</text>
						<text>{{item.stock_count}}</text></view>
					<view class="info">
						<text class="big">{{item.now_price}}</text>
						<text>{{item.ck_price}}</text></view>
					<view class="info">
						<text class="big red" :class="{'green':item.ck_profit<0}">{{item.ck_profit}}</text>
						<text>{{item.market_value?calculate(item.market_value):""}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 子账户选择窗口 -->
		<view class="sub-win" v-show="accountData" @click="subwin = false">
			<view class="cu-modal bottom-modal" :class="{'show':subwin}">
			  <view class="cu-dialog">
			    <view class="pay-list">
						<view class="list" v-for="(item,index) in accountData" :key="index" 
						@click.stop="onSubwin(index)">
							<view class="pay flex">
								<text class="flex-twice text-bold text-df">账号：{{item.sub_account}}</text>
								<text class="flex-sub text-sm">状态：{{item.status?'正常':'到期'}}</text>
							</view>
							<view class="check">
								<text class="iconfont" :class="accounId===item.id?'icon-checked action':'icon-check'"></text>
							</view>
						</view>
					</view>
			  </view>
			</view>
		</view>
		<uni-countdown :show-day="false" :hour="0" :minute="0" :second="30" :reset="true"
		@timeup="getMarket(code);">
		</uni-countdown>
		
		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
import GoodsCoupon from '../../components/GoodsAttr/GoodsAttr.vue';
import uniCountdown  from "@/components/CountDown/uni-countdown.vue"
import Request from '@/js_sdk/luch-request/luch-request/index.js'
const http = new Request();
var _self,loginRes;
export default {
	components: {
	  GoodsCoupon,uniCountdown
	},
	data(){
		return {
			Y: '',//昨天收盘价
			T: '',//今天开盘价
			//id: '',
			token: '',
			subwin: false,
			price : '',//购股单价
			count : 0,//购股数量*100
			amount:'--',
			Canbuy : 0,
			Cansell: 0,
			PriceIndex: 0,//默认选择限价，即手动输入价格
			AttrIndex : '',
			Btype: 1,// 1：买类型，2：卖类型
			accountInfo:uni.getStorageSync('accountInfo')||'',
			accounId :  uni.getStorageSync('accounId')||'',
			sub_account:uni.getStorageSync('sub_account')||'',
			accountData:uni.getStorageSync('accountData')||'',
			marketData: {},
			Position:uni.getStorageSync('Position')||'',//当前股票持仓数据
			PriceList:[{index: 0,name: '限价'},{index: 1,name: '市价'}],
			AttrList:[{index: 0,size: '全仓'},{index: 1,size: '1/2'},{index: 2,size: '1/3'},{index: 3,size: '1/4'},],
		}
	},
	onShow() {
		this.accountInfo = uni.getStorageSync('accountInfo');
		this.sub_account = uni.getStorageSync('sub_account');
		this.accountData = uni.getStorageSync('accountData');
		this.Position    = uni.getStorageSync('Position');
		console.log(this.accounId);
		if(this.Btype===1 && this.PriceIndex==0){//当点击买入时，且为限价模式时
			this.price = this.marketData.sell_one_price;
			this.count  = '';
			if(this.accountInfo.avail)this.Canbuy = parseInt(this.accountInfo.avail/this.price);//计算可买股数
		}else if(this.PriceIndex==1){
			this.price = '';
		}
		if(this.Btype===2 && this.PriceIndex==0){//当点击买入时，且为限价模式时
			this.price = this.marketData.buy_one_price;
			this.count  = '';
			if(this.accountInfo.avail)this.Canbuy = parseInt(this.accountInfo.avail/this.price);//计算可买股数
			if(this.accounId)this.getcanSell(this.accounId)//获取持仓数据
		}else if(this.PriceIndex==1){
			this.price = '';
		}
		setTimeout(() =>{
			if(this.accounId)this.getPosition(this.accounId);//延迟加载持仓数据
		},800)
	},
	onLoad(params){
		_self = this;
		loginRes = _self.checkLogin();
		if(!loginRes){return;}
		_self.Btype = parseFloat(params.type);
		_self.uid   = loginRes[0];
		_self.token = loginRes[2];
		_self.code  = params.code;
		_self.marketData = uni.getStorageSync('market-'+params.code)
		if(this.accounId){//先要默认子账号ID
			this.getacInfo(this.accounId);
		}
	},
	
	onReady(){
		
	},
	methods: 
	{
		/*获取股票信息*/
		async getMarket(code){
			//var codeName = code >= 6 ? "sh"+code : "sz"+code;
			http.post(this.apiServer+'/market/index/market', {uid: this.uid,code: code},{
			    header: {'content-type' : "application/x-www-form-urlencoded"}, 
			    dataType: 'json',
			    custom: {auth: true},
			}).then(res => {
				if(res.data.status == 1){
					this.marketData  = res.data.data;
					uni.setStorageSync('market-'+code , res.data.data);
					this.Y = parseFloat(this.marketData.yesterday_price);//把昨天收盘价赋值给Y
					this.T = parseFloat(this.marketData.open_price);//把今天开盘价赋值给T
				}
			}).catch(err => {
				uni.showToast({title:"加载失败!",icon:"none"});
			})
		},
		/*获取交易账户信息*/
		async getSubAccount(){
			http.post(this.apiServer+'/market/index/getSubAccount', {token: this.token},{
			    header: {'content-type' : "application/x-www-form-urlencoded"}, 
			    dataType: 'json',
			    custom: {auth: true},
			}).then(res => {
				if(res.data.status == 1&&res.data.data.length != 0){	
					this.accountData = res.data.data;
					uni.setStorageSync('accountData' , this.accountData);//子账户数据储存缓存到本地
				}else{
					uni.showToast({title:"请先申请配资账户!",icon:"none"});
					return;
				}
			}).catch(err => {
				uni.showToast({title:"加载失败!",icon:"none"});
			})
		},
		async getacInfo(id){
			uni.showLoading({'title':"加载中"});
			http.post(this.apiServer+'/market/trade/account_info', {token: this.token,id: id},{
			    header: {'content-type' : "application/x-www-form-urlencoded"}, 
			    dataType: 'json',
			    custom: {auth: true},
			}).then(res => {
				uni.hideLoading();
				if(res.data.data.b_status!=1){
					this.getSubAccount();//获取子账号信息
				}
				if(res.data.status == 1){
					this.accountInfo  = res.data.data;
					this.count  = '';
					this.Canbuy = parseInt(this.accountInfo.avail/this.price);//计算可买股数
					uni.setStorageSync('accountInfo' , res.data.data);//子账户数据储存缓存到本地
				}
			}).catch(err => {
				uni.showToast({title:"加载失败!",icon:"none"});
			})
		},
		/*获取可卖数量*/
		async getcanSell(id){
			http.post(this.apiServer+'/market/trade/canSellcount', {id: id,token: this.token,code : this.code},{
			    header: {'content-type' : "application/x-www-form-urlencoded"}, 
			    dataType: 'json',
			    custom: {auth: true},
			}).then(res => {
				if(res.data.status == 1){
					this.Cansell = res.data.data<=0?0:res.data.data;
				}
			}).catch(err => {
				uni.showToast({title:"加载失败!",icon:"none"});
			})
		},
		/*获取当前持仓*/
		async getPosition(id){
			http.post(this.apiServer+'/market/trade/position', {id: id,token: this.token},{
			    header: {'content-type' : "application/x-www-form-urlencoded"}, 
			    dataType: 'json',
			    custom: {auth: true},
			}).then(res => {
				if(res.data.status == 1 && res.data.data.total > 0){
					this.Position = res.data.data.list;
					if(this.Position) uni.setStorageSync('Position' , res.data.data.list);//持仓数据储存缓存到本地
				}else{
					this.Position = '';
				}
			})
		},
		onSubwin(i){
			this.count  = '';//数量框清零
			this.amount = '--';//总金额清零
			this.accounId    = this.accountData[i].id;//将array【改变索引】的值赋给定义的picker变量
			this.sub_account = this.accountData[i].sub_account;
			uni.setStorageSync('accounId' , this.accounId);
			uni.setStorageSync('sub_account' , this.sub_account);
			this.subwin = false;
			this.getacInfo(this.accounId);
			console.log(this.accounId,this.sub_account)
		},
		/*去交易*/
		onTrad(code,cansell,sell_one,buy_one){
			this.code = code;
			this.Cansell = cansell<=0?0:cansell;
			
			if(this.Btype===1 && this.PriceIndex==0){//当点击买入时，且为限价模式时
				this.price = sell_one;
				this.count  = '';
				this.Canbuy = parseInt(this.accountInfo.avail/this.price);//计算可买股数
			}else if(this.PriceIndex==1){
				this.price = '';
			}
			if(this.Btype===2 && this.PriceIndex==0){//当点击买入时，且为限价模式时
				this.price = buy_one;
				this.count  = '';
				this.Canbuy = parseInt(this.accountInfo.avail/this.price);//计算可买股数
			}else if(this.PriceIndex==1){
				this.price = '';
			}
			this.getMarket(code);
			this.getacInfo(this.accounId);
			setTimeout(() =>{
				this.getPosition(this.accounId);
			},2000)
		},
		/*返回*/
		onBack() {
			uni.navigateBack();
		},
		/*搜索点击*/
		onSearch(){
			uni.navigateTo({url:'/pages/search/search'})
		},
		funbs(a,n,o){
			switch(n){
				case 1:
					return a+'_one_'+o;
				break;
				case 2:
					return a+'_two_'+o;
				break;
				case 3:
					return a+'_three_'+o;
				break;
				case 4:
					return a+'_four_'+o;
				break;
				case 5:
					return a+'_five_'+o;
				break;
			}
		},
		/*计算单位*/
		calculate(number){
			number = parseInt(number);
			if(number==0 || !number)return 0;
			if(number.toString().length >= 13){
				var unit = (number/1000000000000).toFixed(2);
				return unit + '万亿';
			}else if(number.toString().length >= 9){
				var unit = (number/100000000).toFixed(2);
				return unit + '亿';
			}else if(number.toString().length > 4){
				var unit =  (number/10000).toFixed(2);
				return unit + '万';
			}else{
				var unit =  number.toFixed(2);
				return unit;
			}
		},
		/*价格模式选择点击*/
		onPriceList(index){
			this.AttrIndex = '';
			this.count  = '';
			this.amount = '--';
			this.PriceIndex = index;//0为限价，1为市价
			if(this.Btype==1 && this.PriceIndex==0){//当点击买入时，且为限价模式时
				this.price = this.marketData.sell_one_price;
			}else if(this.PriceIndex==1){
				this.price = '';
			}
			if(this.Btype==2 && this.PriceIndex==0){//当点击卖出时，且为限价模式时
				this.price = this.marketData.buy_one_price;
			}else if(this.PriceIndex==1){
				this.price = '';
			}
		},
		/*自动数量选择*/
		onAttrList(index){
			//console.log(index,this.AttrIndex)
			if(index===this.AttrIndex){ 
				this.AttrIndex = '';
				this.count  = '';
				this.amount = '--';
				return;
			}else{
				this.AttrIndex = index;
			}
			if(this.Btype==1 && this.PriceIndex==0){//当点击买入时，且为限价模式时
				this.count  = parseInt(this.accountInfo.avail/this.price/100/(index+1))*100;//计算可买股数
			}
			if(this.Btype==2){//当点击卖出时，且为限价模式时
				this.count  = parseInt(this.Cansell/100/(index+1))*100;//计算可卖股数
				//if(this.PriceIndex==0)this.amount = "--";//填入总价
			}
			this.amount = parseInt(this.price * this.count).toFixed(2);//填入总价
			//console.log(this.amount);
		},
		/*减号点击*/
		onReduction(modle){
			switch(modle){
				case 'price':
					var price = (parseFloat(this.price) - 0.01).toFixed(3);
					var dprice= (parseFloat(this.marketData.drop_price)).toFixed(3);
					if(price<dprice)return;//判断计算后的价格是否小于等于跌停价
					if(this.count <= 0)this.count = 100;
					var amount = parseFloat(price) * parseFloat(this.count);//计算总价
					this.price  = price;
					this.amount = amount.toFixed(2);//填入总价
					if(price <= 0){
						this.price  = 0;
						this.amount = 0;
					}
				break;
				case 'count':
					if(!this.count)this.count = 0;
					this.count = parseFloat(this.count) - 100;
					var amount = parseFloat(this.price) * parseFloat(this.count);//计算总价
					this.amount = amount.toFixed(2);//填入总价
					if(this.count < 0){
						this.count  = 0;
						this.amount = 0;
						return;
					}
				break;
			}
		},
		/*加号点击*/
		onIncrease(modle){
			switch(modle){
				case 'price':
					var price = (parseFloat(this.price) + 0.01).toFixed(3);
					var vprice= (parseFloat(this.marketData.harden_price)).toFixed(3);
					if(price>vprice)return;//判断计算后的价格是否大于涨停价
					if(this.count <= 0)this.count = 100;
					var amount = parseFloat(price) * parseFloat(this.count);//计算总价
					this.price  = price;
					this.amount = amount.toFixed(2);//填入总价
				break;
				case 'count':
					if(!this.count)this.count = 0;
					this.count = parseFloat(this.count) + 100;
					var amount = parseFloat(this.price) * parseFloat(this.count);//计算总价
					this.amount = amount.toFixed(2);//填入总价
				break;
			}
		},
		/*价格输入框变动函数*/
		onInputPrice(e){
			var price = parseFloat(e.target.value);
			if(price < 0)this.price = 0;
			var amount = parseFloat(price) * parseFloat(this.count);//计算总价
			if(amount <= this.accountInfo.avail){//如果总价小于余额
				if(price > 0)this.price  = price;
				if(amount> 0)this.amount = amount;//填入总价
			}else{
				this.amount = '--';//填入总价
			}
		},
		/*数量输入框变动函数*/
		onInputCount(e){
			var count = parseInt(e.target.value/100)*100;
			if(count < 0)this.count = 0;
			var amount = parseFloat(this.price) * parseFloat(count);//计算总价
			if(amount <= this.accountInfo.avail){//如果总价小于余额
				if(count > 0)this.count  = count;
				if(amount> 0)this.amount = amount;//填入总价
				if(count <= 0)this.amount = '--';
			}else{
				this.amount = '--';//填入总价
			}
		},
		/*确认点击*/
		onConfirm(type){
			if(this.PriceIndex==0&&!this.price){
				uni.showToast({title:"请输入价格!",icon:"none"});
				return;
			}
			if(!this.count){
				uni.showToast({title:"请输入数量!",icon:"none"});
				return;
			}
			if(!this.accounId){
				uni.showToast({title:"请选择交易账户!",icon:"none"});
				return;
			}
			if(type==1){
				var title = '买入';
				var fun   = 'buy';
			}
			if(type==2){
				var title = '卖出';
				var fun   = 'sell';
			}
			this.$refs['DialogBox'].confirm({
				title: title+'提示',
				content: '确定要'+title+this.marketData.name+'股票吗?',
				DialogType: 'inquiry',
				animation: 0
			}).then(()=>{
				uni.showLoading({'title':"交易申请中"});
				uni.request({
					url: this.apiServer+'/market/trade/'+fun,
					header: {'content-type' : "application/x-www-form-urlencoded"},
					method: 'POST',
					timeout: 5000,
					data:{
						token: this.token,
						id   : this.accounId,
						model: this.PriceIndex+1,//原因是选中项是0开始计算的，二后端是从1开始计算的
						code : this.marketData.code,
						price: this.price,
						count: this.count,
					},
					success: res => {
						uni.hideLoading();
						uni.showToast({title:res.data.message,icon:"none"});
					},
					fail:function(e){
						uni.showToast({title:"加载失败!",icon:"none"});
					}
				});
			})
		},
	}
}

</script>
<style scoped lang="scss">
	@import 'FlashSale.scss';
</style>